<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="Aside">
        <div>
          <el-row>
            <el-row
              v-for="(o, index) in arrOrder"
              :key="index"
              :span="8"
              :offset="index > 0 ? 2 : 0"
            >
              <el-card :body-style="{ padding: '0px' }" class="card">
                <img
                src="https://img1.baidu.com/it/u=3438742520,3870787236&fm=253&app=138&size=w931&n=0&f=PNG&fmt=auto?sec=1665248400&t=81d623b42dc8d2457c85d011c6ed1292"
                  class="image"
                />
                <div style="padding: 14px">
                  <span>{{ o.nickName }}</span>
                  <div class="bottom">
                    <time class="time">{{ currentDate }}</time>
                    <el-button text class="button" @click="btn">会话</el-button>
                  </div>
                </div>
              </el-card>
            </el-row>
          </el-row>
        </div>
      </el-aside>
      <el-container>
        <el-header class="Header">聊天窗口</el-header>
        <el-main class="Main">
          <keep-alive>
          <router-view></router-view>
          </keep-alive>
          
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
// import chat from "./chat.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import store from "../../store/index";
import soket from "../../soket/index";
import { getCurrentInstance } from "vue";
let { proxy } = getCurrentInstance();

const currentDate = ref(new Date()); //显示当前订单时间
const textarea = ref("");

const Mystore = store(); //仓库
// let arrOrder=reactive([{nickName:"666"}])
let arrOrder = reactive([]);
// 登录之后，会直接发送请求后端，创建ws监听器，端口为1000
proxy.$axios({ url: "/order" }).then((res) => {
  console.log(res.data.info);
});

console.log("我重新出现了");
if (! Mystore.change) {
  let ws = soket(fn1, 1000);
 
  Mystore.change = true;
}

function fn1(e) {
  const msg = JSON.parse(e.data);
  // arrOrder=[]

  arrOrder.push(msg);
  console.log(arrOrder);
}
const router = useRouter();
function btn(params) {
  router.push({ path: "/chat", query: { id: Mystore.id } });
}
</script>

<style lang="scss" scoped>
//aside列表样式

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button {
  padding: 0;
  min-height: auto;
}
.card {
  .image {
    width: 100px;
    height: 100px;
    display: block;
  }
}
//aside列表样式

// 框架样式
.Aside {
  width: 20%;
  height: 646px;
  // height: auto;
  overflow: auto;
  background-color: aliceblue;
}
.Header {
  width: 100%;
  // height: 46px;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #535353;
  background-color: rgb(222, 225, 230);
}
.Main {
  width: 100%;
  // height: 600px;
  height: 90%;
  overflow: auto;
  display: flex;
  // justify-content: center;
  // align-items: center;
  flex-wrap: wrap;
  padding: 0;
  background-color: rgb(222, 225, 230);
}
// 框架样式

// 滚轮样式
.Aside::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.Aside::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.Aside::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #ededed;
}
// 滚轮样式

.common-layout {
  width: 100%;
  height: 100%;
}
</style>